<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
  <script src="../build/jquery.min.js"></script>
  <title>demo11</title>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    var UserGist = React.createClass({
      getInitialState: function(){
        return {
          username: '',
          lastGistUrl: ''
        };
      },
      componentDidMount: function(){
        $.get(this.props.source,function(result){
          console.log(result);
          var lastGist = result[0];
          if(this.isMounted()){
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }
        }.bind(this));
      },
      render: function(){
        return (
          <div>
            {this.state.username}'s last gist is
            <a href={this.state.lastGistUrl}>here</a>
          </div>
        );
      }
    });

    ReactDOM.render(
      <UserGist source="https://api.github.com/users/octocat/gists" />,
      document.getElementById('example')
    )
  </script>
</body>
</html>